<template>
  <div class="event_vue_comp_infowindow" :class="true? `event_${orderData[0].longitude}_${orderData[0].latitude}`: ''">
    <div class="img_wrap" @click="handleSmallActive">
      <div class="arrow_wrap"
        v-for="(item, index) in orderData"
        :key="index"
      >
        <div class="svg_wrap longArrow"
          @click.stop="handleArrowClick(item)"
          :style="{transform: `rotate(${item.shootingAngle}deg)`}"
        >
          <svg width="13.564091px" height="40px" viewBox="0 0 13.564091 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>箭头</title>
              <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="com/地图窗口" transform="translate(-688.217381, -280.000000)" fill="#1890FF" fill-rule="nonzero">
                      <g id="编组-5">
                          <path d="M694,280 L696,280 L696,317.207107 L694,317.207107 L694,280 Z M688.854742,312.737033 L695,314.492821 L695,314.492821 L701.1441,312.737364 C701.409617,312.661502 701.68636,312.815248 701.762222,313.080765 C701.812114,313.255388 701.763397,313.443334 701.63496,313.571733 L695.351181,319.853607 C695.155889,320.04884 694.839306,320.048792 694.644074,319.8535 C694.644074,319.8535 694.644074,319.8535 694.644074,319.8535 L688.363774,313.571295 C688.168542,313.376003 688.16859,313.05942 688.363881,312.864188 C688.492281,312.735828 688.680171,312.687156 688.854742,312.737033 Z" id="箭头" transform="translate(694.999427, 300.000000) scale(1, -1) translate(-694.999427, -300.000000) "></path>
                      </g>
                  </g>
              </g>
          </svg>
        </div>
      </div>
      <img :src="orderData[0].orderFiles[0].resourceUrl" alt="">
    </div>
  </div>
</template>

<script>
import EventBus from "@/components/EventBus";
export default {
  name: 'EventInfoWindow',
  data(){
    return {
      arrowlist: []
    }
  },
  props: {
    orderData: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleArrowClick(item) {
      console.log('点击箭头了',item)
      this.handleSmallActive()
      EventBus.$emit('eventMapArrowClickToResource', item.orderFiles[0].resourceId)
    },
    handleSmallActive() {
      EventBus.$emit('eventMapArrowClick', this.orderData)
      Array.from(document.querySelectorAll('.event_vue_comp_infowindow .img_wrap')).forEach(item => {
        if(/active/.test(item.className)){
          item.classList.remove('active');
        }
      })
      // 给当前的激活缩略图添加样式
      let smallInfo = this.orderData[0]
      let id = 'event_'+smallInfo.longitude + '_' +smallInfo.latitude
      document.getElementsByClassName(`${id}`)[0].children[0].classList.add('active')
    }
  },
  mounted(){
    // console.log('event_vue_comp_infowindow')
    // console.log(this.orderData)
  }

}
</script>

<style lang="less" scoped>
.event_vue_comp_infowindow{
  .img_wrap{
    position: relative;
    width: 30px;
    height: 30px;
    border: 2px solid #1890FF;
    border-radius: 4px;
    img{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      border-radius: 4px;
    }
    .arrow_wrap{
      position: absolute;
      top: -26%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      height: 40px;
      cursor: pointer;
    }
    .longArrow{
      height: 40px;
      color: #1890FF;
      display: inline-block;
      transform-origin: bottom center;
      transform: rotate(0deg);
      svg path{
        fill: #1890FF;
      }
    }
  }
  .img_wrap.active{
    border-color: #FFA940;
    .longArrow{
      svg path{
        fill: #FFA940;
      }
    }
  }
}
</style>
